<template>
	<view class="login-page">
		<view>
			<text style="font-size: 60rpx;">登录</text>

		</view>
		<view>
			<text style="font-size: 32rpx;">加入享+，生活更轻松</text>

		</view>
		<view class="form">
			<view class="form-item">
				<input v-model="loginData.mobile" placeholder="请输入手机号" border="none" maxlength="11"></input>


				<text class="sendcode" @click="handleGetCode" style="color: aqua;">获取验证码</text>
			</view>
			<view class="form-item">
				<input v-model="loginData.code" placeholder="请输入验证码" border="none" maxlength="6"></input>

			</view>


		</view>
		<view @click="handleLogin" class="login-box">

			<text>登录</text>

		</view>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue'
	const loginData = ref({
		mobile: '',
		code: '',
	})

	const handleLogin = () => {
		if (loginData.value.mobile.trim() === "") {

			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
		} else if (loginData.value.code.trim() === "") {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			})
		}
		console.log(loginData.value)
	}



	const handleGetCode = () => {

		uni.showToast({
			title: '验证码已发送',
			icon: 'none'

		})
		console.log("123456")

		    uni.request({
		        url: 'api/code',
		        method: 'POST',
		        data: {
		            mobile: loginData.value.mobile,
		        },
		        header: {
		            'Content-Type': 'application/json' // 添加内容类型
		        },
		        success:res => {
		            console.log(res.data);
		}
		    });


	}
</script>


<style lang="scss" scoped>
	.login-page {
		height: 100%;
		padding: 20rpx;
		position: relative;

		.form {
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;

			.form-item {
				width: 100%;
				padding: 30rpx 0;
				margin: 10px;
				border: 1px solid gray;

.sendcode{
	top: 200rpx;
		position: absolute;
		right: 24rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 50rpx;

}
			}


		}
		.login-box {
			position: absolute;
			bottom: 0;
			width: 100%;
			left: 0;
			height: 120rpx;
			box-shadow: 0 -2 2 rbga(220, 220, 220, 0.5);
			
			display: flex;
			justify-content: center; // 水平居中
			align-items: center; // 垂直居中
		}
	}
</style>
